<template>
  <div class="flx-row-bw-c top-nav-main-area">
    <div class="flx-row-s-c">
      <div v-if="colorType == 0" class="menu" @click="clickMenu"></div>
      <div v-if="colorType == 1" class="menu2" @click="clickMenu"></div>
      <div v-if="colorType == 2" class="menu3" @click="clickMenu"></div>
      <div v-if="colorType == 3" class="menu4" @click="clickMenu"></div>
      <div
        class="nav-button flx-row-s-c"
        :style="{
          backgroundImage: `url(${require('_a/userImages/' +
            (colorType == 0
              ? 'menu2'
              : colorType == 1
              ? 'menu2-g'
              : colorType == 2
              ? 'menu2-b'
              : 'menu2-p') +
            '@2x.png')})`,
        }"
      >
        管理中心
        <div
          class="dir-icon"
          :style="{
            backgroundImage: `url(${require('_a/userImages/' +
              (colorType == 0
                ? 'o-down'
                : colorType == 1
                ? 'o-down-g'
                : colorType == 2
                ? 'o-down-b'
                : 'o-down-p') +
              '@2x.png')})`,
          }"
        ></div>
        <div class="box-area">
          <user-nav-box :other="false" :color-type="colorType"></user-nav-box>
        </div>
      </div>
    </div>
    <div class="right-user-area flx-row-s-c">
      <div class="to-home-button user-normal-button" @click="returnIndex">
        返回首页
      </div>
      <div class="to-home-button user-normal-button" @click="goPo">购物车</div>
      <div
        v-for="(item, index) in linkList"
        :key="index"
        class="router-link-item"
        :class="{ 'b-r': index < linkList.length - 1 }"
        @click="toPage(item.to)"
      >
        {{ item.name }}
      </div>
      <div class="avatar-area flx-row-s-c">
        <span class="avatar-text">{{
          $store.state.user.nickname
            ? $store.state.user.nickname
            : $store.state.user.username
            ? $store.state.user.username
            : $store.state.user.account
        }}</span>
        <div class="avatar-default"></div>
        <div class="user-box-area">
          <user-box :color-type="colorType"></user-box>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBottom } from "@/api/data";
import { changelocation } from "@/utils/location";
export default {
  name: "VipTopnavigator",
  components: {
    userNavBox: () => import("_c/navBox/userNavBox.vue"),
    userBox: () => import("_c/navBox/useBox.vue"),
  },
  data() {
    return {
      linkList: [
        {
          name: "安全中心",
          to: "/user/security",
        },
        {
          name: "我的认证",
          to: "/user/certification",
        },
        {
          name: "充值",
          to: "/user/recharge",
        },
      ],
      color: "",
      color1: "",
      colorType: 1, // 1:橙色 2:绿色
    };
  },
  mounted() {
    if (this.$storage.getColor()) {
      this.color = this.$storage.getColor();
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
    // this.color1 = this.hexToRgba(this.color, 0.2)[0];
    // this.changeS();
  },
  methods: {
    // 更换颜色
    changeS() {
      document.documentElement.style.setProperty("--mainColor", this.color);
      document.documentElement.style.setProperty("--hoverMain", this.color1);
    },
    hexToRgba(hex, ...opacity) {
      const rgbaArry = [];
      opacity.forEach((item) => {
        rgbaArry.push(
          `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${item})`
        );
      });
      return rgbaArry;
    },
    returnIndex() {
      window.location.href = changelocation("/");
    },
    goPo() {
      let url = changelocation("/cart");
      window.open(url);
    },
    clickMenu() {
      this.$emit("click-menu");
    },
    toPage(to) {
      if (to == this.$route.path) {
        this.$router.go(0);
      } else {
        this.$router.push(to);
      }
    },
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.color = data.color;
        this.colorType = data.colorType;
        this.changeS();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.top-nav-main-area {
  background-color: $w;
  padding-right: 30px;
  border-bottom: 1px solid $borderColor;
  height: 60px;
  .menu {
    @include size(60px);
    @include bg-setting("menuh", 23px 15px, center);

    border-right: #e7e7e7 solid 1px;
    cursor: pointer;
    margin-right: 20px;
    transition: all 0.3s;
    &:hover {
      background-color: $mainColor;
      border-color: transparent;
      background-image: url("~_a/images/menu@2x.png");
    }
  }
  .menu2 {
    @include size(60px);
    @include bg-setting3("menu-g", 23px 15px, center);

    border-right: #e7e7e7 solid 1px;
    cursor: pointer;
    margin-right: 20px;
    transition: all 0.3s;
    &:hover {
      background-color: $mainColor;
      border-color: transparent;
      background-image: url("~_a/images/menu@2x.png");
    }
  }
  .menu3 {
    @include size(60px);
    @include bg-setting3("menu-b", 23px 15px, center);

    border-right: #e7e7e7 solid 1px;
    cursor: pointer;
    margin-right: 20px;
    transition: all 0.3s;
    &:hover {
      background-color: $mainColor;
      border-color: transparent;
      background-image: url("~_a/images/menu@2x.png");
    }
  }
  .menu4 {
    @include size(60px);
    @include bg-setting3("menu-p", 23px 15px, center);

    border-right: #e7e7e7 solid 1px;
    cursor: pointer;
    margin-right: 20px;
    transition: all 0.3s;

    &:hover {
      background-color: $mainColor;
      border-color: transparent;
      background-image: url("~_a/images/menu@2x.png");
    }
  }
  .nav-button {
    color: $mainColor;
    padding-left: 29px;

    @include bg-setting("menu2", 19px 18px, left center);

    line-height: 60px;
    font-weight: 600;
    font-size: 16px;
    position: relative;

    .dir-icon {
      @include size(12px, 6px);
      @include bg-setting("o-down");

      transform: rotate(0deg);
      transition: transform 0.3s, background-image 0.3s;
      margin-left: 10px;
    }

    .box-area {
      background-color: $w;
      border: 1px solid $borderColor;
      position: absolute;
      left: 0;
      top: 60px;
      box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
      transform: translateY(10px);
      z-index: -1;
      opacity: 0;
      transition: all 0.5s;
    }

    &:hover .dir-icon {
      transform: rotate(-180deg);
    }
    &:hover .box-area {
      transform: translateY(0);
      z-index: 5;
      opacity: 1;
    }
  }

  .to-home-button {
    display: inline-block;
    @include size(78px, 28px);
    @include btn-s(null, 26px, 5px);

    margin-right: 5px;
    font-size: 12px;
    border: 1px solid $mainColor;
    @include h-c($w, $color-main, $mainColor, $mainColor);
  }
  .router-link-item {
    padding: 0 20px;
    font-size: 14px;
    @include h-c(null, null, $text-hover, $mainColor);

    line-height: 15px;
    cursor: pointer;

    &.b-r {
      border-right: #d8d8d8 solid 1px;
    }
  }
  .avatar-area {
    position: relative;
    margin-left: 30px;
    height: 60px;
    .avatar-text {
      font-size: 14px;
      color: $mainColor;
      margin-right: 10px;
    }
    .avatar-default {
      @include size(30px);
      @include bg-setting("user", 16px 17px, center);

      background-color: $mainColor;
      border-radius: 50%;
      cursor: pointer;
    }
    .user-box-area {
      position: absolute;
      right: 0;
      top: 80px;
      transform: translateY(10px);
      box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
      z-index: -1;
      opacity: 0;
      transition: all 0.5s;
    }

    &:hover .user-box-area {
      transform: translateY(0);
      z-index: 5;
      opacity: 1;
    }
  }
}
</style>
